import { useDispatch, useSelector, useHistory } from 'umi';
import { IRouteComponentProps } from 'umi'
import { useEffect, useState , useRef } from 'react';
import { Button, Table, Popover, message } from 'antd'
// import { commentItem } from '@/utils/comment';
import styles from './comment.less';

// 评论管理
const Comment: React.FC<IRouteComponentProps> = () => {

//   name: 1
// email: 1
// pass: 0
  const name = useRef('')
  const email = useRef('')
  const pass = useRef('')

  const state = useSelector((state: { comment: any }) => state.comment)

  let dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'comment/getData',
      payload : {
        params : {
          name : '',
          email : '',
          pass : ''
        }
      }
    })
  }, [])

  const columns = [
    {
      title: '状态',
      dataIndex: 'pass',
      key: '1',
      width: 150,
      render: (row: any) => <b>{ row? '已通过' : '未通过'}</b>,
    },
    {
      title: '称呼',
      dataIndex: 'name',
      key: '2',
      width: 150,
    },
    {
      title: '联系方式',
      dataIndex: 'email',
      key: '3',
      width: 150,
    },
    {
      title: '原始内容',
      dataIndex: 'html',
      key: '4',
      width: 150,
      render: (row: any) => <div>
        <Popover placement="top" content={<p>{row}</p>} trigger="click">
          查看内容
        </Popover>
      </div>
    },
    {
      title: 'HTML 内容',
      dataIndex: 'content',
      key: '5',
      width: 150,
      render: (row: any) => <div>
        <Popover placement="top" content={<p>{row}</p>} trigger="click">
          查看内容
        </Popover>
      </div>
    },
    {
      title: '管理文章',
      dataIndex: 'pass',
      key: '6',
      width: 150,
      render: (row: any) => <div>
        <Popover placement="top" content={<p>{row}</p>} trigger="click">
          查看内容
        </Popover>
      </div>
    },
    {
      title: '创建时间',
      dataIndex: 'updateAt',
      key: '7',
      width: 150
    },
    {
      title: '父级评论',
      dataIndex: 'parentCommentId',
      key: '8',
      width: 150
    },
    {
      title: 'Action',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (row: any) => <p> <a>通过</a>  <a>拒绝</a>  <a>回复</a> <a>删除</a></p> ,
    }
  ];

  function FromSub(){
    dispatch({
      type: 'comment/getData',
      payload : {
        params : {
          name : name.current.value,
          email : email.current.value,
          pass : pass.current.value,
        }
      }
      
    })
    
  }

  return <div className={styles.wrap}>
    <div className={styles.from}>
      <div className={styles.InpBox}>
        称呼 :<input ref={name} type="text" />
        Email:  <input ref={email} type="text" />
        状态 : <input ref={pass} type="text" />
      </div>
      <div className={styles.SubBox}>
        <Button type="primary" onClick={()=>{FromSub()}}>搜索</Button>
        <Button>重置</Button>
        
      </div>
    </div>

    <div className={styles.main}>
      <Table
        columns={columns}
        rowKey='id'
        dataSource={state.commData}
        scroll={{ x: 1200 }}
      />
    </div>
  </div>
}

export default Comment;